import React, { Component } from 'react'
import { Typography, Space } from 'antd'
const { Title, Text, Link, Paragraph } = Typography
export default class MyTypography extends Component{
  state = {
    text1: 'edit text',
    text2: 'copy text'
  }
  changeParagraph = (text) => {
    this.setState({ text1: text })
  }
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">Title</div>
          <div className="box-body">
            <div className="box-content">
              <Title>h1.title</Title>
              <Title level={2}>h2.title</Title>
              <Title level={3}>h3.title</Title>
              <Title level={4}>h4.title</Title>
              <Title level={5}>h5.title</Title>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">Text&Link</div>
          <div className="box-body">
            <div className="box-content">
              <Space size='middle'>
                <Text type="success">success</Text>
                <Text type="warning">warning</Text>
                <Text type="danger">danger</Text>
                <Text mark>mark</Text>
                <Text delete>delete</Text>
                <Link href="http://baidu.com" target="_blank">baidu link</Link>
              </Space>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">Paragraph</div>
          <div className="box-body">
            <div className="box-content">
              <Paragraph editable={{ onChange: this.changeParagraph }}>{ this.state.text1 }</Paragraph>
              <Paragraph copyable>{ this.state.text2 }</Paragraph>
            </div>
          </div>
        </div>
      </>
    )
  }
}